<template>
	<div>
		<div class="one_one">
			<li><span>我的电子劵</span></li>
			<li>首页 > 卡劵服务 ><span>我的电子劵</span></li>
		</div>
<div class="one_three">							
		<template><span class="one_two">卡劵服务 ：</span>
			<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
				<el-radio-button label="one">全单</el-radio-button>
				<el-radio-button label="two">代金</el-radio-button>
			</el-radio-group>
		</template><br>
		
		<template class="spa"><span class="one_two">审核 ：</span>
			<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
				<el-radio-button>全单</el-radio-button>
				<el-radio-button label="three">草稿</el-radio-button>
				<el-radio-button label="four">待审核</el-radio-button>
				<el-radio-button label="five">待发布</el-radio-button>
				<el-radio-button label="six">已发布</el-radio-button>
				<el-radio-button label="sevent">下线</el-radio-button>
			</el-radio-group>
		</template>
			</div>
		<div class="one">

			<el-form label-width="90px" :model="search" :inline="true" ref="searchForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="search.name" placeholder="搜索用户"></el-input>
				</el-form-item>
				<el-form-item label="日期" prop="date">
					<el-date-picker v-model="search.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="search.address"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="resetForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<span class="san">共91笔交易明细</span>
		<el-button class="btn" type="primary" @click="toAdd()">添加</el-button>
		<el-table :data="ftableData" style="width: 100%">
			<el-table-column prop="date" label="创建日期" width="200">
			</el-table-column>
			<el-table-column prop="name" label="名称" width="200">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="num" label="发放数量">
			</el-table-column>
			<el-table-column prop="price" label="使用明细">
			</el-table-column>
			<el-table-column fixed="left" label="操作" width="120">
				<template slot-scope="scope">
					<el-button @click.native.prevent="deleteRow(scope.$index,scope.row, tableData)" type="text"
						style="color:orangered" size="small">
						删除
					</el-button>
					<el-button @click.native.prevent="toEidtRow(scope.$index, scope.row,tableData)" type="primary"
						size="mini">
						编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
			<el-form label-width="90px" :model="tempRow">
				<el-form-item label="姓名">
					<el-input v-model="tempRow.name"></el-input>
				</el-form-item>
				<el-form-item label="创建日期">
					<el-date-picker v-model="tempRow.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="tempRow.address"></el-input>
				</el-form-item>
				<el-form-item label="发放数量">
					<el-input v-model="tempRow.num"></el-input>
				</el-form-item>
				<el-form-item label="使用明细">
					<el-input v-model="tempRow.price"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sureEdit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {


		computed: {
			// 搜索过后的数据
			ftableData() {
				// 如果数据不会控
				// if(this.search.name!=""){
				// 	// 如果搜索的名称name 被 当前遍历的数据包含，返回为true，当前数据保留
				// 	return this.tableData.filter(item=>item.name.includes(this.search.name))
				// }else{
				// 	return this.tableData;
				// }
				return this.tableData.filter(item => {
					var flag = true;
					// 对搜索search对象进行遍历
					for (var k in this.search) {
						// 如果搜索条件不为空才进行搜索
						if (this.search[k] != "") {
							// 如果当前遍历item对应的k不包含当前搜索对应的k，
							if (!item[k].includes(this.search[k])) {
								// flag值改变false（当前数据就会被过滤掉）
								flag = false;
							}
						}
					}
					return flag;
				})
			}
		},
		methods: {
			// 重置搜索表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			// 打开添加弹框
			toAdd() {
				// 修改标题
				this.dialogTitle = "添加"
				// 清空临时数据
				this.tempRow = {
					name: '',
					date: '',
					address: '',
					num: '',
					price: ''
				}
				// 显示弹框
				this.dialogVisible = true;
			},
			// 实现编辑
			sureEdit() {
				// 可以用js对象解构实现
				// 如果标题是添加，实现添加功能
				if (this.dialogTitle == "添加") {
					// 数据添加到最前面
					this.tableData.unshift({
						...this.tempRow
					});
					// 弹出成功提示
					this.$message({
						type: 'success',
						message: '添加成功!'
					});
				} else {
					// 实现修改功能
					this.tableData[this.editIndex].name = this.tempRow.name;
					this.tableData[this.editIndex].date = this.tempRow.date;
					this.tableData[this.editIndex].address = this.tempRow.address;
					this.tableData[this.editIndex].num = this.tempRow.num;
					this.tableData[this.editIndex].price = this.tempRow.price;
				}

				this.dialogVisible = false;
				// this.$set()
			},
			// 显示弹框
			toEidtRow(index, row, tableData) {
				console.log(index, row, tableData);
				this.dialogTitle = "编辑"
				this.dialogVisible = true;
				this.tempRow.name = row.name;
				this.tempRow.date = row.date;
				this.tempRow.address = row.address;
				this.tempRow.num = row.num;
				this.tempRow.price = row.price;

				this.editIndex = index;
			},
			// 实现删除
			deleteRow(index, row, tableData) {
				console.log(index, row, tableData);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableData.splice(index, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		data() {
			return {
				tabPosition: 'left',
				search: {
					name: '',
					date: '',
					address: '',
					num: '',
					price: ''
				},
				// 弹框的标题
				dialogTitle: "编辑",
				// 正在编辑的行
				editIndex: null,
				// 是否显示弹框
				dialogVisible: false,
				// tempRow
				tempRow: {
					name: '',
					date: '',
					address: '',
					num: '',
					price: ''
				},
				tableData: [{
					date: '2016-06-13  17:32:49',
					name: 'SSDD345',
					address: ' 已发布',
					num: '122',
					price: '点击查看'
				}, {
					date: '2016-05-04',
					name: '1',
					address: '待审核',
					num: '122',
					price: '点击查看'
				}, {
					date: '2016-05-01',
					name: 'SSDD346',
					address: '待审核',
					num: '122',
					price: '点击查看'
				}, {
					date: '2016-05-03',
					name: 'SSDD341',
					address: '待审核 ',
					num: '122',
					price: '点击查看'
				}]
			}
		}
	}
</script>

<style>
	
	.one_three div span {
		margin-top: 30px;
	}

	.one_two {
		font-size: 15px;
		color: #333333;
		margin-left: 50px;
		
	}

	.one>el-radio-group {
		margin-left: 20px;
	}

	.cell {
		text-align: center;
	}

	.san {
		margin-left: 20px;
		font-size: 20px;
		/* margin-top: 20px; */
	}

	.one>form {
		margin-top: 20px;
	}

	.btn {
		margin-left: 8px;
		
		margin-top: 20px;
	}

	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.one_one {
		width: 1600px;
		height: 40px;
		border-bottom: 2px solid #dddddd;
		margin-left: 20px;
		margin-top: 20px;
	}

	.one_one li {
		font-size: 18px;
		padding-left: 10px;
		border-left: 2px solid #0075d2;
		display: inline-block;

	}

	.one_one li:nth-of-type(2) {
		border: none;
		font-size: 13px;
		color: #666666;
		float: right;
	}
</style>
